<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">

        <el-form-item label="区域" required>
          <el-radio-group v-model="area" @change="changeArea">
            <el-radio  label="深圳">深圳</el-radio>
            <el-radio  label="合肥">合肥</el-radio>
            <el-radio  label="武汉">武汉</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属地点" required v-if="this.place!=''">
          <el-select v-model="place" :filterable="true" size="mini" placeholder="请选择">
            <el-option v-for="(item,index) in placeField" :key="index" :label="item.label" :value="item.value"></el-option>
            <!--<el-option label="深圳" value="深圳"></el-option>
            <el-option label="武汉" value="武汉"></el-option>
            <el-option label="合肥" value="合肥"></el-option>-->
          </el-select>
        </el-form-item>
        <el-form-item label="所属地点" required v-if="this.place==''">
          <el-input v-model="place" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="部门" required>
          <el-cascader
                  size="mini"
                  v-model="dept1"
                  :options="depts"
                  :clearable="true"
                  @change="deptChange"
                  :props="{ checkStrictly: true }"
                  filterable
          ></el-cascader>
        </el-form-item>
        <p>采购明细</p>
        <el-form-item label="物品类型" required v-if="this.type!=''">
          <el-select v-model="type" :filterable="true" size="mini" placeholder="请选择">
            <el-option v-for="(item,index) in typeField" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物品类型" required v-if="this.type==''">
          <el-input v-model="type" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="物品名称" required>
          <el-input v-model="pname" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="型号/规格" required>
          <el-input v-model="specification" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="数量" required>
          <el-input v-model="number" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="单价" required>
          <el-input v-model="price" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="总价" required>
          <el-input v-model="totalprice" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="采购链接" required>
          <el-input v-model="link" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="other" size="mini"></el-input>
        </el-form-item>

        <div class="upload_area">
          <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
            <p style="font-size:16px;font-weight: 900">审批人</p>

            <van-step v-if="oneShow">
              <h3>一级审批</h3>
              <van-image v-for="(item,index) in onespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="twoShow">
              <h3>二级审批</h3>
              <van-image v-for="(item,index) in twospusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <van-step v-if="threeShow">
              <h3>三级审批</h3>
              <van-image v-for="(item,index) in threespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>
            <van-step v-if="fourShow">
              <h3>四级审批</h3>
              <van-image v-for="(item,index) in fourspusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <!--<van-step v-show="oneShow">
              <p style="font-size:16px;font-weight: 900">上级领导</p>
              <van-image v-for="(item) in oneLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>-->

            <van-step v-show="zdShow">
              <p style="font-size:16px;font-weight: 900">人事行政</p>
              <van-image v-for="item in twoLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>
            <van-step v-show="zdrzShow">
              <p style="font-size:16px;font-weight: 900">人事主管/经理</p>
              <van-image v-for="item in threeLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
              </van-image>
            </van-step>

            <!--            <van-step v-show="fourShow">
                          <p style="font-size:16px;font-weight: 900">副经理</p>
                          <van-image v-for="item in fourLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                          </van-image>
                        </van-step>-->

          </van-steps>
        </div>



        <el-form-item>
          <el-button v-bind:disabled="show" type="primary" size="mini" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { Toast, Calendar,Form  } from "vant";
  import { Image as VanImage } from 'vant';

  Vue.use(VanImage);
  Vue.use(Calendar);
  Vue.use(Form);
export default {

  data() {
    return {
      id:"",
      area:"",
      place:" ",
      placeField:[],
      type:" ",
      typeField:[],
      dept:"",
      dept1:[],
      depts: [],
      pname:"",
      specification:"",
      number:"",
      price:0,
      totalprice:0,
      link:"",
      other:"",

      nowUser:"",
      title: "物品采购申请",

      isShow:false,
      message:"提交",
      show:false,

      showtg:true,

      active:"-1",//步骤索引,从0开始
      oneShow:false,
      twoShow:false,
      threeShow:false,
      fourShow:false,
      onespusers:[],
      twospusers:[],
      threespusers:[],
      fourspusers:[],

      zdShow:true,
      twoLd:[],
      zdrzShow:true,
      threeLd:[],

    };
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
    var jobnumid=JSON.parse(localStorage.getItem('userInfo')).jobNumId;
    if (jobnumid.indexOf("HF")!=-1){
      this.area="合肥"
    }else if (jobnumid.indexOf("WH")!=-1){
      this.area="武汉"
    }else {
      this.area="深圳"
    }
    this.getAllPlace();
    this.selDept();
    this.getLd();
    this.getAllType();
  },
  methods: {

    formatArea(data,curr){
      if(data){
        for(let i=0;i<data.length;i++){
          //console.log(data[i])
          curr.push({
            label:data[i],
            value:data[i],
          })
        }
        //console.log(curr)
      }
    },
    //获取所有相关地区
    getAllPlace(){
      this.$https.post('/mobiles/selInventoryPlace',{
        nowUser:this.nowUser,
        area:this.area
      }).then((res)=>{
        this.placeField=[{label:"自定义地点",value:""}];
        this.formatArea(res.data,this.placeField);
      }).catch(err => {
        console.log(err);
      })
    },
    changeArea(value){
      this.area=value;
      this.place=" ";
      this.getAllPlace();
    },

    //获取所有相关物品类型
    getAllType(){
      this.$https.post('/mobiles/selInventoryType',{
        nowUser:this.nowUser
      }).then((res)=>{
        this.typeField=[{label:"自定义物品类型",value:""}];
        this.formatArea(res.data,this.typeField);
      }).catch(err => {
        console.log(err);
      })
    },

    //初始化选择部门
    selDept(){
      this.$https.post('/mobiles/selPCDept').then((res)=>{
        //debugger
        //console.log(res.data.data)
        this.depts=res.data.data;
      }).catch(err => {
        console.log(err);
      });
    },
    //点击获得选中的部门
    deptChange(value){
      //console.log(value)
      this.dept=value[value.length-1];
    },

    //查找对应用户的上级领导进行审批
    getLd(){
      this.$https.post('/mobiles/getProcureSp',{
        nowUser:this.nowUser,
      }).then((res)=>{

        if (res.data.data.onespusers && res.data.data.onespusers.length>0){
          this.oneShow=true;
          this.onespusers=res.data.data.onespusers;
        }else{
          this.oneShow=false;
          this.onespusers=[];
        }
        if (res.data.data.twospusers && res.data.data.twospusers.length>0){
          this.twoShow=true;
          this.twospusers=res.data.data.twospusers;
        }else{
          this.twoShow=false;
          this.twospusers=[];
        }
        if (res.data.data.threespusers && res.data.data.threespusers.length>0){
          this.threeShow=true;
          this.threespusers=res.data.data.threespusers;
        }else{
          this.threeShow=false;
          this.threespusers=[];
        }
        if (res.data.data.fourspusers && res.data.data.fourspusers.length>0){
          this.fourShow=true;
          this.fourspusers=res.data.data.fourspusers;
        }else{
          this.fourShow=false;
          this.fourspusers=[];
        }

        /*if (res.data.data.ld1.length>0){
          this.oneShow=true;
          this.oneLd=res.data.data.ld1;
        }*/

        if (res.data.data.ld2.length>0){
          this.zdShow=true;
          this.twoLd=res.data.data.ld2;
        }
        if (res.data.data.ld3.length>0){
          this.zdrzShow=true;
          this.threeLd=res.data.data.ld3;
        }
        /*if (res.data.data.ld4.length>0){
          this.fourShow=true;
          this.fourLd=res.data.data.ld4;
        }*/
      }).catch(err => {
        console.log(err);
      })
    },
    // 返回
    goBack() {
      this.$router.go(-1);
    },
    onSubmit() {
      //提交事件
      this.show=false;
      this.$https.post('/mobiles/addProcureApply', {
        nowUser:this.nowUser,
        area:this.area,
        place:this.place,
        dept:this.dept,
        pname:this.pname,
        specification:this.specification,
        number:this.number,
        price:this.price,
        totalprice:this.totalprice,
        link:this.link,
        other:this.other,
        type:this.type,
      }).then(res => {
        res.data;
        Toast("申请成功");
        this.goBack();
      }).catch(err => {
        console.log(err)
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>